<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子背景</title>
  <style>
    body {
      height: 1500px;
    }

    .box {
      width: 400px;
      height: 400px;
      /* background-color: pink; */
      /* 背景图片 */
      /* background-image: url(./img/ldh.png); */
      /* 背景平铺 */
      /* background-repeat: no-repeat; */
      /* background-repeat: repeat-x; */
      /* background-repeat: repeat-y; */
      /* 背景位置 */
      /* background-position: x y; */
      /* background-position: 50px 10px; */
      /* background-position: 50% 50%; */
      /* 方位名词 top  bottom  left  right  center */
      /* background-position: left top; */
      /* background-position: right bottom; */
      /* background-position: center center; */
      /* 如果只写一个值，则第二个值是y省略了，默认是 center */
      /* background-position: center; */
      /* 下面写法相当于left center */
      /* background-position: left; */

      /* 背景缩放 尺寸 */
      /* 覆盖:缩放背景图片以完全覆盖背景区，会失真 */
      /* background-size: cover; */
      /* 包含:缩放背景图片以完全装入背景区，可能背景区部分空白。 */
      /* background-size: contain; */
      /* 设置图片大小300*300px */
      /* background-size: 300px 300px; */
      /* 背景固定 滚动的  scroll 滚动的  fixed 固定的  相对于当前视口 */
      /* background-attachment: scroll; */
      /* background-attachment: fixed; */


      /* 复合写法 */
      /* center/200px 是 背景位置（position）和背景尺寸（size） 的简写组合。
         我们来分解一下：
         center center：表示背景图片在容器中的定位。
         第一个 center 指的是水平方向居中（即 50% 0 的水平部分）。
         第二个 center 指的是垂直方向居中（即 0 50% 的垂直部分）。
         所以 center center 表示图片在容器中水平和垂直都居中。
         /200px：这是 background-size 的值，跟在斜杠 / 后面。
         它表示背景图片的大小。
         200px 在这里是一个宽度值。当只指定一个尺寸时，CSS 默认高度会按原图比例自动调整（保持宽高比）。
         所以 center/200px 实际上是 background-position: center center; background-size: 200px auto; 的简写。
         总结：
         center/200px 的意思是：
         将背景图片在容器中水平和垂直居中对齐，并且将其宽度设置为 200px，高度按原始比例自动缩放。
         完整等价代码：
         background-color: pink;
         background-image: url(./img/ldh.png);
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 200px auto;
         这个技巧常用于让图标或头像等图片在容器中居中并控制其显示大小。
      */
      background: pink url(./img/ldh.png) no-repeat center center/200px;
      /* background: pink url(./img/ldh.png) no-repeat center center/200px 300px; */
    }
  </style>
</head>

<body>
  <div class="box">123</div>
</body>

</html>